<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用网页结构元素进行网页布局</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        /* 网页的宽度和对齐方式 */

        .main {
            width: 1000px;
            margin: 40px auto;
        }
        /* 导航的宽度、高度和整体样式 */

        .main nav {
            width: 1000px;
            height: 40px;
            background: #999;
            border-radius: 5px;
        }
        /* 导航各个栏目的宽度、高度和对齐方式 */

        nav ul li {
            width: 70px;
            height: 40px;
            /* 向左浮动 */
            float: left;
            /* 水平垂直居中对齐 */
            text-align: center;
            line-height: 40px;
            list-style: none;
        }
        /* 超链接初始状态的样式 */

        nav ul li a {
            color: #fff;
            font-family: serif;
            font-size: 14px;
        }
        /* 鼠标悬停超链接样式 */

        nav ul li a:hover {
            font-weight: bold;
        }
        /* 娱乐新闻 样式规则 */

        .main .block1 {
            width: 430px;
            height: 250px;
            margin-top: 20px;
            float: left;
        }
        /* 军事新闻 样式规则 */

        .main .block2 {
            width: 430px;
            height: 250px;
            margin-top: 20px;
            float: right;
        }
        /* 娱乐新闻和军事新闻模块中标题样式 */

        .block1 h1,
        .block2 h1 {
            color: #333;
            font-size: 20px;
            font-family: "微软雅黑";
            line-height: 50px;
            /* 首行缩进 */
            text-indent: 1em;
        }
        /* 列表规则 */

        .block1 ul,
        .block2 ul {
            width: 390px;
            margin: 0 19px 10px 19px;
            list-style: none;
        }
        /* 列表各项的宽度和高度 */

        .block1 ul li,
        .block2 ul li {
            width: 390px;
            height: 40px;
        }
        /* 列表各项的文字样式 */

        .block1 ul li a,
        .block1 ul li time,
        .block2 ul li a,
        .block2 ul li time {
            color: #333;
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 40px;
        }

        .block1 ul li a,
        .block2 ul li a {
            float: left;
        }
        /* 鼠标悬停为红色 */

        .block1 ul li a:hover,
        .block2 ul li a:hover {
            color: #EF2D36;
        }

        .block1 ul li time,
        .block2 ul li time {
            float: right;
        }
        /* footer样式规则 */

        footer {
            /* 清除左右两边的浮动 */
            clear: both;
            width: 1000px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
        }

        footer h1 span {
            margin-right: 20px;
        }

        footer h1 span a {
            color: #333;
            font-family: "微软雅黑";
            font-size: 14px;
            line-height: 200px;
        }

        footer h1 span a:hover {
            color: #EF2D36;
        }
    </style>
</head>

<body>
<div class="main">
    <p>
        <a id="FileTop"></a>
    </p>
    <!-- header -->
    <header>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#" style="color: #EF2D36;">新闻</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">数码</a></li>
            </ul>
        </nav>
    </header>
    <!-- 娱乐新闻 主体 -->
    <div class="block1">
        <section>
            <h1>娱乐新闻</h1>
            <ul>
                <li>
                    <a href="#">香港已没有黑帮大家都不想在里面混</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">《碟中谍5》爆外景地花絮</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">灾难发生后该不该禁播娱乐节目</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">多部好莱坞大片登录中国</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
            </ul>
        </section>
    </div>
    <!-- 军事新闻 主体 -->
    <div class="block2">
        <section>
            <h1>军事新闻</h1>
            <ul>
                <li>
                    <a href="#">2015阅兵在9月3日举行</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">习近平对县委书记十二句严厉警告</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">日本在政府瓦美好这么开设关于钓鱼岛网页</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">中国坦克打先锋巴铁反恐精锐尽出</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
            </ul>
        </section>
    </div>
    <!-- 数码新闻 主体 -->
    <div class="block1">
        <section>
            <h1>娱乐新闻</h1>
            <ul>
                <li>
                    <a href="#">微软已在秘密测试Android版Edge浏览器</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">平板电脑五年走到市场拐点</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">苹果邀请建解密Hint有新释义</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">IDF2015因特尔谷歌联手</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
            </ul>
        </section>
    </div>
    <!-- 手机新闻 主体 -->
    <div class="block2">
        <section>
            <h1>手机新闻</h1>
            <ul>
                <li>
                    <a href="#">超大运行内存手机推荐</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">国产旗舰手机盘点</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">西门子归来 首款智能机配置强调分出色</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
                <li>
                    <a href="#">骗子植入手机木马的10大招数</a>
                    <time datetime="2022-11-7">2022-11-7</time>
                </li>
            </ul>
        </section>
    </div>
</div>
<!-- footer -->
<footer>
    <h1><span><a href="#">关于我们</a></span><span><a href="#">联系我们</a></span></h1>
</footer>
</body>

</html>
